<%@ page import="news.pojo.News" %>
<%@ page import="news.pojo.Category" %>
<%@ page import="java.util.List" %>
<%@ page import="news.util.StringUtil" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%
    News n = (News)request.getAttribute("news");
    List<Category> categoryList = (List<Category>) request.getAttribute("categoryList");
    String pubTime = StringUtil.localDF.format(n.getPubTime());
%>
<html>
<head>
    <title>修改 ${news.title}</title>
    <link rel="stylesheet" href="/assets/bootstrap.css">
    <style>
        .form-group{}
    </style>
</head>
<body>
<div class="container">
    <form method="post" action="edit?id=${news.id}">
        <div class="form-group">
            <label for="title" class="form-label">新闻标题</label>
            <input type="text" name="title" id="title" class="form-control" value="${news.title}">
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-6">
                    <label for="cate" class="form-label">分类</label>
                    <select name="cate" id="cate" class="form-select">
                        <% for(Category c : categoryList){ %>
                        <option value="<%=c.getAlias()%>" <%= c.getAlias().equalsIgnoreCase(n.getCate())?"selected":"" %>><%=c.getTitle()%></option><% } %>
                    </select>
                </div>
                <div class="col-6">
                    <label for="level" class="form-label">新闻等级</label>
                    <select name="level" id="level" class="form-select">
                        <% for(int i = 0; i <= 10;i ++){ %>
                        <option value="<%=i%>" <%= i == n.getLevel()?"selected":"" %>>等级<%=i%></option>
                        <% } %>
                    </select>
                </div>
            </div>

        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-4">
                    <label for="source" class="form-label">新闻来源</label>
                    <input type="text" name="source" id="source" class="form-control" value="${news.source}">
                </div>
                <div class="col-4">
                    <label for="author" class="form-label">作者</label>
                    <input type="text" name="author" id="author" class="form-control" value="${news.author}">
                </div>
                <div class="col-4">
                    <label for="pubTime" class="form-label">发布时间</label>
                    <input type="text" name="pubTime" id="pubTime" class="form-control" value="${news.pubTime}">
                </div>
            </div>

        </div>

        <div class="form-group">
            <label for="content" class="form-label">新闻内容</label>
            <textarea name="content" id="content" class="form-control" style="display: none;">${news.content}</textarea>
            <div id="news-editor">${news.content}</div>
        </div>
        <div class="form-group">
            <button class="btn btn-primary" style="width: 120px;" type="submit">保存</button>
        </div>
    </form>
</div>
</body>
<script src="/assets/wang-editor.js"></script>
<script>
    // https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js
    // 1.下载上面的链接到本地或者直接使用
    // 2.创建一个要变成编辑器的div并设置id
    // 3.编写如下代码
    const editor = new wangEditor('#news-editor'); // 创建编辑器实例
    editor.create(); //创建并显示编辑器
    // 4.将编辑器的内容实时同步到textarea -- 因为只提交多文本(编辑器不属于表单元素)
    const textArea = document.querySelector('#content');
    editor.config.onchange = function (html) {
        // 第二步，监控变化，同步更新到 textarea
       textArea.value = html;
    }
</script>
</html>
